<script setup lang="ts">
import HeaderNav from '@/components/HeaderNav.vue'
import { getWAhis } from '@/api/getWAhis'
import { delHis } from '@/api/delHis'
import { updateHis } from '@/api/updateHis'
import { ref, onMounted } from 'vue'

// import { useRoute } from 'vue-router'

const hasSubmit = ref(false)
const wrongAnsList = ref<
  { datetime: string; poem_id: number; topic_id: number; topics: string[] }[]
>([])
const detailpage = ref<{
  activate: boolean
  topic_id: number
  index: number
  blankIndex: number
  inputValues: string
  ifCorrectAnswer: boolean
}>({
  activate: false,
  topic_id: -1,
  index: -1,
  blankIndex: -1,
  inputValues: '',
  ifCorrectAnswer: false
})

// 产生十个0-2的随机数

onMounted(() => {
  getWAhis().then((res) => {
    // console.log(res)
    wrongAnsList.value = res.data
    // console.log(wrongAnsList.value)
  })
})

function showTopic(outerIndex: number) {
  detailpage.value.activate = true
  detailpage.value.index = outerIndex
  detailpage.value.topic_id = wrongAnsList.value[outerIndex].topic_id
  detailpage.value.blankIndex = Math.floor(
    Math.random() * wrongAnsList.value[outerIndex].topics.length
  )
  detailpage.value.inputValues = ''
  detailpage.value.ifCorrectAnswer = false
  hasSubmit.value = false
  // console.log(detailpage.value.blankIndex)
}

function clearInput() {
  // createRandomIndex()
  detailpage.value.inputValues = ''
  hasSubmit.value = false
}

function submitAns() {
  hasSubmit.value = true
  detailpage.value.inputValues = detailpage.value.inputValues.replace(/[^\u4e00-\u9fa5]/g, '')
  if (
    wrongAnsList.value[detailpage.value.index].topics[detailpage.value.blankIndex] ==
      detailpage.value.inputValues ||
    wrongAnsList.value[detailpage.value.index].topics[detailpage.value.blankIndex] ==
      detailpage.value.inputValues + '。'
  ) {
    detailpage.value.ifCorrectAnswer = true
    delHis(detailpage.value.topic_id).then((res) => {
      getWAhis().then((res) => {
        // console.log(res)
        wrongAnsList.value = res.data
        // console.log(wrongAnsList.value)
      })
      setTimeout(() => {
        detailpage.value.inputValues = ''
        detailpage.value.topic_id = -1
        detailpage.value.index = -1
        detailpage.value.activate = false
      }, 500)
    })
    // console.log('right')
  } else {
    detailpage.value.ifCorrectAnswer = false
    updateHis(detailpage.value.topic_id)
    // console.log('wrong')
  }
}
</script>

<template>
  <header>
    <HeaderNav />
  </header>
  <div class="mainPart">
    <div v-if="!detailpage.activate">
      <div class="card" v-for="(item, outerIndex) in wrongAnsList" :key="outerIndex">
        <div v-for="(content, index) in item.topics" :key="index" class="topic">
          <span @click="showTopic(outerIndex)"
            >{{ content }}
            <span v-if="index === item.topics.length - 1">。</span>
            <span v-else>，</span>
          </span>
        </div>
        <div class="showTime">
          {{ item.datetime }}
        </div>
      </div>
    </div>
    <div class="showDetail" v-if="detailpage.activate">
      <button @click="detailpage.activate = false" style="position: relative; left: 10px; top: 1%">
        返回
      </button>
      <div class="detailCard">
        <div
          v-for="(content, index) in wrongAnsList[detailpage.index].topics"
          :key="index"
          class="topic topic2"
        >
          <span v-if="index === detailpage.blankIndex">
            <input
              type="text"
              class="blank blank2"
              placeholder="__________________"
              v-model="detailpage.inputValues"
              :class="hasSubmit ? (detailpage.ifCorrectAnswer ? 'right' : 'wrong') : ''"
              style="font-size: 30px"
            />
            <span v-if="index === wrongAnsList[detailpage.index].topics.length - 1">。</span>
            <span v-else>，</span>
          </span>
          <span v-else
            >{{ content }}
            <span v-if="index === wrongAnsList[detailpage.index].topics.length - 1"></span>
            <span v-else>，</span>
          </span>
        </div>
        <div class="showRes">
          <span v-if="hasSubmit && detailpage.ifCorrectAnswer">回答正确</span>
          <span v-if="hasSubmit && !detailpage.ifCorrectAnswer">回答错误</span>
        </div>
        <div class="menu">
          <el-button type="primary" :onclick="clearInput">清空</el-button>
          <el-button type="success" :onclick="submitAns">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<!--  -->
<style scoped>
header {
  width: 100%;
  padding: 0%;
  margin: 0%;
}

.mainPart {
  position: absolute;
  height: 80%;
  top: 12.5%;
  left: 15%;
  right: 15%;
  justify-content: center;
  align-items: center;
  background-color: antiquewhite;
  border-radius: 10px;
  overflow: auto;
  /* 优化滚动条 */
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
  border-radius: 10px;
}
.menu {
  margin: auto;
}

.topic {
  display: inline-block;
}

.blank {
  border: none;
  background-color: transparent;
  width: 60px; /* 或根据需要调整 */
}

.blank2 {
  border: none;
  background-color: transparent;
  width: 250px; /* 或根据需要调整 */
}

.right {
  color: greenyellow;
}
.wrong {
  color: red;
}

.card {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  background-color: ghostwhite;
}

.showTime {
  font-size: small;
  color: #888;
}

.showDetail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 101;
}

.topic {
  display: inline-block;
}

.detailCard {
  margin: 10px;
  height: 90%;
  text-align: center;
  font-size: 30px;
  padding: 10px;
  border-radius: 10px;
  background-color: ghostwhite;
}

.topic2 {
  margin-top: 40px;
}

.menu {
  position: relative;
  bottom: -40%;
}
.el-button {
  margin: 0 50px;
}

.showRes {
  position: relative;
  bottom: -20%;
  font-size: 30px;
  color: #888;
}
</style>
